<template>
  <div>
    <a-table
      :columns="columns"
      :data-source="data"
      :pagination="{ pageSize: 50 }"
      :scroll="{ y: 240 }"
    />
  </div>
</template>
<script>
import Axios from 'axios'

const columns = [
  {
    title: 'Name',
    dataIndex: 'person_name',
    width: 150,
  },
  {
    title: 'Age',
    dataIndex: 'person_age',
    width: 150,
  },
  {
    title: 'Address',
    dataIndex: 'address',
  },
]

// const data = []
// let data = []
// for (let i = 0; i < 100; i++) {
//   data.push({
//     key: i,
//     name: `Edward King ${i}`,
//     age: 32,
//     address: `London, Park Lane no. ${i}`,
//   })
// }

Axios.defaults.baseURL = '/api'

export default {
  name: 'Index',
  data() {
    return {
      data: [],
      loading: false,
      columns,
    }
  },
  mounted() {
    this.fetch()
  },
  methods: {
    fetch() {
      this.loading = true
      Axios.get('/persons/')
        .then((res) => {
          for (let i = 0; i < res.data.length; ++i) {
            this.data.push({
              key: i,
              person_name: res.data[i].person_name,
              person_age: res.data[i].person_age,
              address: res.data[i].address,
            })
          }
        //   console.log(res)
        })
        .catch((error) => {
          console.log('Error', error.message)
        })
    },
  },
}
</script>
